<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #all{
            width: 100%;
            height: 186px;
            background-color: #fbfbfb;
        }
        #all p{
            margin-left: 90px;
            font-size: 14px;
            color: #9D9D9D;
            position: relative;
            top: 15px;
        }
        #all p:hover{
            color: #5d5d5d;
        }
        #all div{
            width: 120px;
            height:120px;
            float: left;
            margin-left: 50px;
        }
        #all ul{
            list-style: none;
        }
        #all div:nth-of-type(5){
            width: 200px;
        }
        #all div:nth-of-type(2){
            width: 180px;
        }
        #all div:nth-of-type(3){
            width: 180px;
        }
        #all div:nth-of-type(4){
            width: 150px;
        }
        #all div:nth-of-type(5){
            width: 380px;
        }
        #all div:nth-of-type(6) img{
            width: 75%;
        }
        #all div:nth-of-type(6) span{
            font-size: 14px;
            color: #9D9D9D;
            position: relative;
            left: 9px;
            top: -10px;
        }
        #all > div > ul > li{
            height: 25px;
        }
        #all > div > ul > li > a{
            text-decoration: none;
            color: #9D9D9D;
            font-size: 14px;
        }

        #all > div > ul > li > a:hover{
            color: #5d5d5d;
        }
        #all div:nth-of-type(6) span:hover{
            color: #5d5d5d;
        }
        #all > div:nth-child(6) > ul > li:nth-child(1) > a > img{
            width: 20px;
            position: relative;
            top: 5px;
        }
        #all > div:nth-child(6) > ul > li:nth-child(2) > a > img{
            width: 20px;
            position: relative;
            top: 5px;
        }
        #all > div:nth-child(6) > ul > li:nth-child(2) > a > img:nth-child(2){
            width: 30px;
            position: relative;
            left: 5px;
            top: 3px;
        }
    </style>
</head>
<body>
<div id="all">
    <p>© Gitee.com</p>
    <div>
        <ul>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">使用条款</a></li>
            <li><a href="#">意见建议</a></li>
            <li><a href="#">合作伙伴</a></li>
        </ul>
    </div>

    <div>
        <ul>
            <li><a href="#">Git 大全</a></li>
            <li><a href="#">Git 命令学习</a></li>
            <li><a href="#">代码克隆检测</a></li>
            <li><a href="#">APP与插件下载</a></li>
        </ul>
    </div>

    <div>
        <ul>
            <li><a href="#">码云封面人物</a></li>
            <li><a href="#">GVP项目</a></li>
            <li><a href="#">码云博客</a></li>
            <li><a href="#">Gitee 公益计划</a></li>
        </ul>
    </div>

    <div>
        <ul>
            <li><a href="#">OpenAPI</a></li>
            <li><a href="#">帮助文档</a></li>
            <li><a href="#">在线自助服务</a></li>
            <li><a href="#">更新日志</a></li>
        </ul>
    </div>

    <div>
        <ul>
            <li><a href="#"><img src="img/qq.png">官方技术交流QQ群：1050025484</a></li>
            <li><a href="#"><img src="img/邮箱.png">git@oschina.cn<img src="img/知1.png">码云Gitee</a></li>
            <li><a href="#">企业版售前及售后使用咨询：400-606-0201</a></li>
        </ul>
    </div>

    <div>
        <img src="img/ewm.jpg">
        <br/>
        <span>微信服务号</span>
    </div>
</div>
</body>
</html>